<div>
    <div class="pannel">
        <div class="pannel-head">
            <p>
                <span class="title">接入设备管理</span>
                <!-- <span class="count">(<i style="color: #333;">{{count.totalNum}}</i>)全部, (<i style="color: #333;">{{count.ynum}}</i>)已开启, (<i style="color: #f00;">{{count.nnum}}</i>)已关闭</span> -->
            </p>
        </div>
        <div class="pannel-body">
            <div class="pannel-filter">
                <div class="pannel-filter-left">
                    <nz-select style="width: 120px" [(ngModel)]="pages.isEnable" (ngModelChange)="changeFilter()">
                        <nz-option nzValue="" nzLabel="全部"></nz-option>
                        <nz-option nzValue="Y" nzLabel="已开启"></nz-option>
                        <nz-option nzValue="N" nzLabel="已关闭"></nz-option>
                    </nz-select>
                </div>
                <div class="pannel-filter-right">
                    <nz-input-group [nzSuffix]="suffixIconSearch">
                        <input type="text" nz-input [(ngModel)]="pages.keywords" placeholder="请输入搜索条件" />
                    </nz-input-group>
                    <ng-template #suffixIconSearch>
                        <a (click)="changeFilter()"><i nz-icon type="search"></i></a>
                    </ng-template>
                </div>
            </div>
            <div>
                <nz-table
                    class="pannel-body-table"
                    #nzTable
                    [nzData]="dataList"
                    [nzShowPagination]="true"
                    [nzLoading]="tableLoading"
                    [nzFrontPagination]="false"
                    [nzPageIndex]="pages.pageNo"
                    [nzTotal]="pages.total"
                    [nzPageSize]="pages.pageSize"
                    [nzPageSizeOptions]="[10,20,30,40,50]"
                    [nzShowQuickJumper]="true"
                    [nzShowSizeChanger]="true"
                    [nzShowTotal]="totalTemplate"
                >
                    <thead>
                        <tr>
                            <th nzWidth="150px">设备名称</th>
                            <th nzWidth="150px">型号</th>
                            <th nzWidth="150px">厂商</th>
                            <th nzWidth="150px">设备类型</th>
                            <th nzWidth="150px">上次开启时间</th>
                            <th nzWidth="150px">接入状态</th>
                            <th nzWidth="80px">状态</th>
                            <th nzWidth="100px">操作</th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr *ngFor="let data of dataList">
                            <td>{{ data.name }}</td>
                            <td>{{ data.model }}</td>
                            <td>{{ data.manufacturer }}</td>
                            <td>{{ data.type }}</td>
                            <td>{{ data.lastOpenTime }}</td>
                            <td>{{ data.createTime }}</td>
                            <td>
                                <nz-tag *ngIf="data.isEnable === 'N'" [nzColor]="'#FF5555'">已关闭</nz-tag>
                                <nz-tag *ngIf="data.isEnable === 'Y'" [nzColor]="'#10C572'">已开启</nz-tag>
                            </td>
                            <td>
                                <a routerLink="/equipment/detail" [queryParams]="{ id : data.id}"><img src="../../../../assets/img/cz-detail.png" /></a>
                                <!-- <a (click)="deleteEquipment(data)"><img src="../../../../assets/img/cz-delete.png" /></a> -->
                                <a *ngIf="data.isEnable === 'N'" (click)="openEquipment(data)"><img src="../../../../assets/img/cz-open.png" /></a>
                                <a *ngIf="data.isEnable === 'Y'" (click)="closeEquipment(data)"><img src="../../../../assets/img/cz-close.png" /></a>
                            </td>
                        </tr>
                    </tbody>
                </nz-table>
                <ng-template #totalTemplate let-total> 共{{ total }}条</ng-template>
            </div>
        </div>
    </div>
</div>
